<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="我的"
        right-text="设置"
        @click-right="onClickRight"
      />
    </header>
    <div class="content my">
      <header>
        <van-uploader :after-read="afterRead" :max-size="1024*25" @oversize="oversize">
          <van-image
            round
            width="1rem"
            height="1rem"
            :src="avatar"
          />
        </van-uploader>
        <div class="userName">
          <h4>{{nickName}}</h4>
          <small>{{userName}}</small>
        </div>
      </header>
      <van-grid column-num="5">
        <van-grid-item icon="photo-o" text="待付款" />
        <van-grid-item icon="photo-o" text="待发货" />
        <van-grid-item icon="photo-o" text="待收货" />
        <van-grid-item icon="photo-o" text="待评价" />
        <van-grid-item icon="photo-o" text="已完成" />
      </van-grid>
      <van-cell-group>
        <van-cell title="我的收藏" value="5" />
        <van-cell title="我的地址" value=">>" />
        <van-cell title="我的购物车" value="内容" />
        <van-cell title="我的足迹" value="内容" />
        <van-cell title="我的爱好" value="内容" />
        <van-cell title="我的联系方式" value="内容" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage, Cell, CellGroup, Grid, GridItem, NavBar, Uploader, Icon, Toast } from 'vant'
import { getUserMsg, setUserMsg } from '../../api/index.js'

import { mapState } from 'vuex'

Vue.use(VanImage)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(NavBar)
Vue.use(Uploader)
Vue.use(Icon)
Vue.use(Toast)

export default {
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.isLogin === 'ok') {
        next()
      } else {
        next('/login?t=' + to.path)
      }
    })
  },
  data () {
    return {
      avatar: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2456468987,3284231714&fm=26&gp=0.jpg',
      birthday: '0',
      email: '',
      hobby: [],
      nickName: '临时用户',
      sex: 1,
      tel: '17600901915',
      userName: 'admin'
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      userId: state => state.user.userId
    })
  },
  mounted () {
    console.log(this)
    getUserMsg({
      userId: this.userId
    }).then(res => {
      console.log(res.data.data)
      this.avatar = res.data.data.avatar
      this.userName = res.data.data.userName
      this.nickName = res.data.data.nickName
    })
  },
  methods: {
    onClickRight () {
      this.$router.push('/setUserMsg')
    },
    afterRead (file) {
      setUserMsg({
        userId: this.userId,
        userData: {
          avatar: file.content
        }
      }).then(res => {
        console.log(res.data.data)
        this.avatar = res.data.data.avatar
      })
    },
    oversize () {
      Toast('图片大小不允许超过25K')
    }
  }
}
</script>

<style lang="scss">
.my{
  header{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4rem 0;
    .userName{
      margin-left: 0.4rem;
    }
  }
}
</style>
